import { AvatarImage } from '@/desktop/components/avatar'
import { ellipsis } from '@/desktop/styles'
import { unique } from '@/lib/utils'
import { useGroups } from '../edit/choose-target-groups-logics'
import { type Task } from '../logics'

export function TargetGroups({ task }: { task: Task }) {
  const wxids = useMemo(() => unique(task.contacts.map(v => v.ownerWxid)), [task])
  const { allGroupsMap } = useGroups(wxids)

  const targets = useMemo(
    () =>
      task.contacts.map(info => ({
        ...info,
        group: allGroupsMap.get(info.id) ?? null,
      })),
    [task, allGroupsMap],
  )

  return <div>
    {targets.map(({ id, conversationId, group }) => {
      return <div key={id} css={s.group}>
        <AvatarImage src={group?.avatar} size={32} preview={false} />
        <span className="name">{group?.name ?? conversationId}</span>
      </div>
    })}
  </div>
}

const s = {
  group: css`
    align-items: center;
    column-gap: 10px;
    display: flex;
    margin-left: 6px;
    overflow: hidden;
    &:not(:last-child) {
      margin-bottom: 8px;
    }
    .name {
      ${ellipsis};
    }
  `,
}
